<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例1</title>
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./resource/reset.css">
    <link rel="stylesheet" href="./resource/fontawesome/css/all.css">
</head>

<body>
    <!-- 创建上面的背景与文字 -->
    <div class="up-bg-text w">
        <!-- 创建三行文字 -->
        <ul class="bg-text w2">
            <li class="text1">We Can Find just Right Property for You.</li>
            <li class="text2">we deal with different kinds of properties no matter you need a hbus lan apartment or
                garage. You"ll find a good option on our Theme.</li>
            <li class="text3">SHOW</li>
        </ul>
    </div>

    <!-- 创建中间菜单栏 -->
    <div class="menu-wrapper w2">
        <!-- 创建左侧的图标和文字 -->
        <ul class="left-imgtext">
            <li>
                <img src="./resource/img/楼宇数.png" alt="">
            </li>
            <li>CASTLE</li>
        </ul>
        <!-- 创建右侧菜单栏 -->
        <ul class="right-menu">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Listing</a>
            </li>
            <li>
                <a href="#">Properties</a>
            </li>
            <li>
                <a href="#">Features</a>
            </li>
            <li>
                <a href="#">Contact Us</a>
            </li>
            <li>
                <a href="#">Buy Now</a>
            </li>
        </ul>
    </div>

    <!-- 创建下边的介绍栏 -->
    <div class="introduce-wrapper w">
        <!-- 创建居中容器 -->
        <div class="middle-intro-wrapper w2">
            <!-- 创建上边的两行文字 -->
            <div class="intro-text1">REAL ESTATE PROPERTIES</div>
            <div class="intro-text2">we have Properties in these Areas Vievw a list of Featured Properties.</div>
            <!-- 创建三个菜单 -->
            <ul class="intro-menu">
                <li class="blue">
                    <a href="#">SALE</a>
                </li>
                <li>
                    <a href="#">LATEST</a>
                </li>
                <li>
                    <a href="#">RENT</a>
                </li>
            </ul>
            <!-- 创建三个详细介绍 -->
            <ul class="intro-expression">
                <!-- 第一块 -->
                <li class="intro-ex1">
                    <div class="label1">featured</div>
                    <div class="label2">For Sale</div>
                    <div class="label3">$8,600 Per Month</div>
                    <!-- 创建中间的文字 -->
                    <div class="intro-ex1-text1">
                        Park Avenue Apartment
                    </div>
                    <div class="intro-ex1-text2">
                        45 Regent Street,London,UK
                    </div>
                    <!-- 创建块底部的点赞分享栏 -->
                    <div class="ex1-bottom">
                        <!-- 创建左侧两个 -->
                        <div class="ex1-b-left">
                            <i><img src="./resource/img/日历.png" alt=""></i>
                            5 Days ago
                        </div>
                        <!-- 创建右侧两个 -->
                        <ul class="ex1-b-right">
                            <li class="ex1-b-right-1">
                                <img src="./resource/img/点赞.png" alt="">
                            </li>
                            <li class="ex1-b-right-2">
                                <img src="./resource/img/分享.png" alt="">
                            </li>
                        </ul>
                    </div>
                </li>
                <!-- 第二块 -->
                <li class="intro-ex2">
                    <div class="ex2-label1">featured</div>
                    <div class="ex2-label2">For Sale</div>
                    <div class="ex2-label3">$8,600 Per Month</div>
                    <!-- 创建中间的文字 -->
                    <div class="intro-ex2-text1">
                        Park Avenue Apartment
                    </div>
                    <div class="intro-ex2-text2">
                        45 Regent Street,London,UK
                    </div>
                    <!-- 创建块底部的点赞分享栏 -->
                    <div class="ex2-bottom">
                        <!-- 创建左侧两个 -->
                        <div class="ex2-b-left">
                            <i><img src="./resource/img/日历.png" alt=""></i>
                            5 Days ago
                        </div>
                        <!-- 创建右侧两个 -->
                        <ul class="ex2-b-right">
                            <li class="ex2-b-right-1">
                                <img src="./resource/img/点赞.png" alt="">
                            </li>
                            <li class="ex2-b-right-2">
                                <img src="./resource/img/分享.png" alt="">
                            </li>
                        </ul>
                    </div>
                </li>
                <!-- 第三块 -->
                <li class="intro-ex3">
                    <div class="ex3-label1">featured</div>
                    <div class="ex3-label2">For Sale</div>
                    <div class="ex3-label3">$8,600 Per Month</div>
                    <!-- 创建中间的文字 -->
                    <div class="intro-ex3-text1">
                        Park Avenue Apartment
                    </div>
                    <div class="intro-ex3-text2">
                        45 Regent Street,London,UK
                    </div>
                    <!-- 创建块底部的点赞分享栏 -->
                    <div class="ex3-bottom">
                        <!-- 创建左侧两个 -->
                        <div class="ex3-b-left">
                            <i><img src="./resource/img/日历.png" alt=""></i>
                            5 Days ago
                        </div>
                        <!-- 创建右侧两个 -->
                        <ul class="ex3-b-right">
                            <li class="ex3-b-right-1">
                                <img src="./resource/img/点赞.png" alt="">
                            </li>
                            <li class="ex3-b-right-2">
                                <img src="./resource/img/分享.png" alt="">
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <!-- 创建底部按钮 -->
            <div class="bottom-button">MORE LISTINGS</div>
        </div>
    </div>
</body>

</html>